

<script>

// const obj = {
//     msg:"哈哈"
// }


//组件，一个组件可以创造多个实例 
export default {
    // data是一个函数
    // 在data中，this就是当前的组件实例vm
    // 如果使用箭头函数，则无法通过this来访问实例
    // 使用vue时，减少箭头函数的使用
    
    data() {
        // 直接向组件实例中添加的属性不会被vue所代理，不是影响数据，修改后页面不会发生变化
        // this.name = "孙悟空"
        // vm.$data 是实际的代理对象，通过vm可以直接访问到$data中的属性
        // vm$data.msg等价于vm.msg
        // 可以通过vm.$data动态的向组件中添加响应式数据

        // console.log("data",this)
        // data会返回一个对象作为返回值，vue会对该对象进行代理
        // 从而返回响应式数据
        return {
            msg: "我爱学习vue"
        }
        // return obj
    },
    created(){
        // 会在组件创建完毕后调用
        //可以通过vm.$data动态的向组件中添加响应式数据，但是不建议这么做
        this.$data.name = "孙悟空"
    }
}
</script>

<template>
    <h1>{{ msg }}</h1>
    <button>点我一下</button>
</template>